import { Statistic, Tooltip } from 'antd';
import React, { useEffect, useState } from 'react';
import { currentUser as queryCurrentUser } from '../services/ant-design-pro/api';

const UpdateExpire: React.FC = () => {
  const [time, setTime] = useState(600);
  function updater() {
    setTime(600);
  }
  useEffect(() => {
    const chan = new BroadcastChannel('updateToekn');
    chan.onmessage = function () {
      updater();
    };
    const id = setInterval(() => {
      setTime((pre) => {
        if (pre === 0) {
          return 0;
        } else {
          return pre - 1;
        }
      });
    }, 1000);
    return () => {
      clearInterval(id);
    };
  }, []);
  return (
    <>
      <Tooltip placement="topRight" title={'过期时间'}>
        <div
          onClick={async () => {
            queryCurrentUser();
          }}
        >
          <Statistic value={time} />
        </div>
      </Tooltip>
    </>
  );
};

export default UpdateExpire;
